<template>
  <div class="wrapper p-4">
    <div class="mb-3">
      报警类型：
      <el-select class="w180 mr-2" v-model="alarmType" slot="prepend" placeholder="请选择" size="small" @change="currentPage=1;QueryAlarmById()">
        <el-option label="全部" :value="0"></el-option>
        <el-option v-for="(item,index) in global.alarmTypes" :key="index" :label="item.name" :value="item.id"></el-option>
      </el-select>
      选择日期：
      <el-date-picker v-model="times" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
      size="small" class="mr-1 w250" @change="currentPage=1;QueryAlarmById()"></el-date-picker>
      <el-checkbox class="mr-3" label="发生" name="type" v-model="isAlarm" @change="currentPage=1;QueryAlarmById()"></el-checkbox>
      <el-button  slot="append" class="ur-btn ur-btn-primary" @click="exportData()"><i class="iconfont icon-export font16"></i>导出</el-button>
    </div>
    <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" height="350px"  highlight-current-row>
      <el-table-column prop="EventTime"  label=" 报警时间" align="center" width="200"></el-table-column>
      <el-table-column prop="Des" label="报警内容"  align="center"></el-table-column>
      <el-table-column prop="Erc" label="事件代码" width="80" align="center"></el-table-column>
      <el-table-column prop="State" label="发生/恢复"  align="center" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.State" class="text-danger">发生</span>
          <span v-else>恢复</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="mt-3" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
    :page-sizes="[20, 50, 100, 200]" :page-size="pageSize" layout="total, sizes, prev, pager, next ,jumper" :total="total"></el-pagination>
  </div>
</template>

<script>
  import api from 'api/api'
  import fetch from 'api/fetch'
  export default {
    components: {
    },
    props: {
      data: {},
      type:null,
    },
    data() {
      return {
        tableData3:[],
        total: 0,
        currentPage: 1,
        pageSize:100,
        isAlarm:true,
        alarmType:0,
        times:[],
      }
    },
    watch: {},
    computed: {},
    methods: {
      QueryAlarmById() {
        let data={onlyNew:this.isAlarm?1:0,type: this.type, id:this.type==1?this.data.RtuId:this.data.TnId,
          ercType:this.alarmType,startDate:this.times?this.times[0]:'',endDate:this.times?this.times[1]:'',
          pageSize:this.pageSize,pageNo:this.currentPage}
        api.fetchSimple('/History/QueryAlarmById', data).then(r => {
          this.total=r.total
          this.tableData3=r.data
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
        this.QueryAlarmById()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.QueryAlarmById()
      },
      exportData(){
        let data={onlyNew:this.isAlarm?1:0,type: this.type, id:this.type==1?this.data.RtuId:this.data.TnId,
          ercType:this.alarmType,startDate:this.times?this.times[0]:'',endDate:this.times?this.times[1]:''}
        api.fetchFile('/History/ExportAlarmById',data)
          .then(r => {
            fetch.saveFile(r,'报警历史详情',['',''])
          })
      },
    },
    created() {
      this.QueryAlarmById()
    },
    mounted() {
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
